<script setup>
import { getCategoryAPI, getParentAPI } from '@/api/category.js'
import ItemBox1 from '@/views/Home/component/ItemBox1.vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const id = ref(route.params.id)

//获得父类的id
const category = ref({})
const getParent = async () => {
  const res = await getParentAPI(id.value)
  category.value = res.data.result
}
getParent()
//获得全部商品
const sortField = ref([
  { name: '最新商品', value: 'publishTime' },
  { name: '最高人气', value: 'orderNum' },
  { name: '最多评论', value: 'evaluateNum' }
])
const activeValue = ref('publishTime')
const categoryList = ref()
const items = ref([])
const data = ref({})
const getCategory = async (sortField) => {
  data.value = {
    categoryId: id.value,
    page: 1,
    pageSize: 20,
    sortField: sortField
  }
  const res = await getCategoryAPI(data.value)
  categoryList.value = res.data.result
  items.value = categoryList.value.items
}
getCategory('publishTime')
//根据tab切换商品
const handleClickTab = (tab) => {
  getCategory(tab.props.name)
}
//根据页数切换商品
const currentPage = ref(1)
const handleCurrentChange = async (val) => {
  console.log(`current page: ${val}`)
  data.value.page = val
  const res = await getCategoryAPI(data.value)
  categoryList.value = res.data.result
  items.value = categoryList.value.items
}
</script>
<template>
  <div class="secondCategory">
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/${category.parentId}` }">{{
        category.parentName
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ category.name }}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 选择部分 -->
    <el-tabs
      type="border-card"
      v-model="activeValue"
      class="elTabs"
      @tab-click="handleClickTab"
    >
      <el-tab-pane
        :label="i.name"
        :name="i.value"
        v-for="i in sortField"
        :key="i"
        class="tabPane"
      >
        <ItemBox1
          v-model:item="items[index]"
          v-for="(item, index) in items"
          :key="item.id"
        ></ItemBox1
      ></el-tab-pane>
    </el-tabs>

    <!-- 页码 -->
    <div style="display: flex; justify-content: center; width: 100%">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="items.length"
        v-model:current-page="currentPage"
        :page-size="20"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style scoped lang="scss">
.elTabs {
  margin-top: 20px;
  .tabPane {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}
</style>
